<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/18
  Time: 9:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的客户</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">

</head>
<body>
<table id="roleTable" class="layui-hide" lay-filter="roleTable"></table>

<script type="text/html" id="roleToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn " lay-event="search" ><i class="layui-icon">&#xe615;</i>搜索</button>
        <button class="layui-btn " lay-event="add" ><i class="layui-icon">&#xe654;</i>新建</button>
        <button class="layui-btn " lay-event="track" ><i class="layui-icon">&#xe654;</i>新建跟踪记录</button>
        <button class="layui-btn" lay-event="update"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-bg-orange" lay-event="transfer" ><i class="layui-icon">&#xe674;</i>转移</button>
        <button class="layui-btn layui-bg-red" lay-event="delete" ><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-bg-red" lay-event="export" ><i class="layui-icon">&#xe640;</i>导出</button>
    </div>
</script>


<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['layer','form','table','jquery'],function () {
        var layer=layui.layer
            , form=layui.form;
        var table=layui.table;
        var $=layui.$;


        //表单提交监听事件
        form.on('submit(query)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            table.reload("roleTable",{
                where:{//查询条件
                    params:data.field// 会封装到LayRequest中的params中去
                },
                page:{
                    curr:1//当前页
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        table.render({
            elem: "#roleTable",
            url:"${pageContext.request.contextPath}/customer/customers",
            toolbar:'#roleToolbar',
            defaultToolbar:['filter','print','exports'],
            cols:[[
                {type:'checkbox',fixed:'left'},
                {field:'name',title:"客户名称",width:150,templet:function (res) {
            return "<a href='javascript:;' class='name' cunstmerid='"+res.id+"' onclick='tiao(this)'>"+res.name+"</a>";
        }},
                {field:'id',title:"id",hide:true},
                {field:'status',title:"客户状态",width:150},
                {field:'type',title:"客户类别",width:150},
                {field:'maturity',title:"客户成熟度",width:150},
                {field:'levels',title:"客户等级",width:150},
                {field:'description',title:"客户描述",width:300,toolbar: "#innerToolBar"}

            ]],
            page:true
        })
        layer.msg("Hello word");
        //监听事件
        window.tiao=function(obj){
            var cunstmerid = $(obj).attr("cunstmerid");
            layer.open({
                title:"客户详情",
                type:2,
                content:"${pageContext.request.contextPath}/customer/customerDetails?id="+cunstmerid,
                area: ['800px', '700px'],
                maxmin:true//可以最大化
            });
        }

        table.on('toolbar(roleTable)', function(obj){
            //选中的数据
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        title:"客户新建",
                        type:2,//为ifram层，可以加载其他的页面到弹出层
                        content:"${pageContext.request.contextPath}/customer/toadd",
                        area:['700px','500px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'delete':
                    layer.msg('删除');
                    //将内容打印到浏览量的控制台
                    console.log(checkStatus)
                    console.log(checkStatus.data)
                    if (checkStatus.data.length==0){
                        layer.alert("请至少选择一项删除");
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值，并放入数组
                    for (var i=0;i<data.length;i++){
                        idArray.push(data[i].id);
                    }
                    console.log(idArray);
                    //执行批量删除
                    $.post("${pageContext.request.contextPath}/customer/batchDelete",
                        {ids:idArray.join(",")},function (result) {
                            if(result.code==0){
                                layer.msg("删除成功");
                                table.reload("roleTable",{
                                    page:{
                                        curr:1
                                    }
                                })
                                return
                            }
                            layer.msg("删除失败")
                        },"json")
                    break;

                case 'update':
                    if (checkStatus.data.length==0){
                        layer.alert("请至少选择一项修改");
                        return;
                    }
                    if (checkStatus.data.length>1){
                        layer.alert("请选择一项修改");
                        return;
                    }
                    layer.open({
                        title:"客户修改",
                        type:2,//为ifram层，可以加载其他的页面到弹出层
                        content:"${pageContext.request.contextPath}/customer/toupdate?id="+checkStatus.data[0].id,
                        area:['700px','500px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'search':
                    layer.open({
                        title:"条件搜素",
                        type:2,
                        content:"${pageContext.request.contextPath}/customer/tosearch",
                        area:['700px','500px'],
                        maxmin:true
                    })
                    break;
                case 'transfer':
                    layer.open({
                        title:"客户转移",
                        type:2,
                        content:"${pageContext.request.contextPath}/customer/transfers",
                        area:['700px','500px'],
                        maxmin:true
                    })
                    break;
                case 'export':
                    layer.msg('导出成功');
                    //将内容打印到浏览量的控制台
                    console.log(checkStatus)
                    console.log(checkStatus.data)
                    if (checkStatus.data.length==0){
                        layer.alert("请至少选择一项导出");
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值，并放入数组
                    for (var i=0;i<data.length;i++){
                        idArray.push(data[i].id);
                    };
                    $.post("${pageContext.request.contextPath}/customer/headpic",
                        {ids:idArray.join(",")},function (result) {
                            if(result.code==0){
                                layer.msg("导出成功");
                                table.reload("roleTable",{
                                    page:{
                                        curr:1
                                    }
                                })
                                return
                            }
                            layer.msg("导出失败")
                        },"json")
                    break;
                case 'track':
                    layer.open({
                        title:"新建跟踪",
                        type:2,
                        content:"${pageContext.request.contextPath}/customer/tolist",
                        area:['500px','600px']
                    })
            };
        });

    });
</script>
</body>
</html>
